<template>
  <div style="width: 100%">
    <Modal
      v-model="modals"
      scrollable
      footer-hide
      closable
      title="详情"
      :mask-closable="false"
      @on-cancel="cancel"
      width="1050"
    >
      <div class="product_tabs tabbox">
        <Tabs v-model="currentTab" @on-click="ontab">
          <TabPane
              v-for="(item, index) in headTab"
              :key="index"
              :label="item.title"
              :name="item.name"
          ></TabPane>
        </Tabs>
      </div>

      <div class="table">
        <Table
            :columns="columns"
            :data="tabList"
            ref="table"
            class="mt25"
            :loading="loading"
            highlight-row
            no-userFrom-text="暂无数据"
            no-filtered-userFrom-text="暂无筛选结果"
            height="450"
        >
          <template #created_at="{ row }">
            <strong>{{ formattedDate(row.created_at) }}</strong>
          </template>
          <template slot-scope="{ row, index }" slot="sales_revenue">
            <Numeral :value="row.sales_revenue" format="0,0.00" style="color: #f5222d">
              <template #prefix>
                <strong>$</strong>
              </template>
            </Numeral>
          </template>

          <template #status="{ row }">
            <strong v-if="row.status == 2">待入库</strong>
            <strong v-else-if="row.status == 4">入库接收中</strong>
            <strong v-else-if="row.status == 6">完结</strong>
          </template>

          <template slot-scope="{ row, index }" slot="costs">
            <Numeral :value="row.costs" format="0,0.00" style="color: #00c050">
              <template #prefix>
                <strong>$</strong>
              </template>
            </Numeral>
          </template>
          <template slot-scope="{ row, index }" slot="ending_balance">
            <Numeral :value="row.ending_balance" format="0,0.00">
              <template #prefix>
                <strong>$</strong>
              </template>
            </Numeral>
          </template>
        </Table>
      </div>
    </Modal>

  </div>
</template>

<script>

import { mapState } from 'vuex';
import Setting from "@/setting";


export default {
  name: 'commissionDetails',
  data() {
    return {
      fileUrl: Setting.apiBaseURL + "/file/upload",
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },
      currentTab: '1',
      onClickTab(e) {
        this.tab = e;
      },
      headTab: [
        { title: "账单明细", name: "1" },
        { title: "新签seller数", name: "2" },
        { title: "新签发货seller数", name: "3" },
        { title: "新签到货seller数", name: "4" },
        { title: "总发货数", name: "5" },
        { title: "总到货数", name: "6" },
      ],
      merchantsDetails: {},
      modals: false,
      warehouseModals:false,
      warehouse_type:"",
      vertical: 'increment',
      ohterModal: false,
      paidModel:false,
      formPaid:{},
      formPaidRules:[],
      header: {},
      urlList:[],
      costsTitle: '',
      costsAmount: '',
      remarks: '',
      detailsData: {},
      Ids: 0,
      loading: false,
      supplierList: [],
      SettlementSummary: {},
      ids: '',
      formValidate: {
        ids: '',
        supplier_id: '',
        keyword: '',
        detail_type: '',
        page: 1,
        limit: 10,
      },
      total: 0,
      columns: [],
      tabList: [],
      warehouseTabList: [],
      orderIncomeColumns:[
        {
          title: '标题',
          key: 'title',
          minWidth: 80,
        },
        {
          title: '账期',
          key: 'period_range',
          minWidth: 80,
        },
        {
          title: '收入金额',
          slot: 'sales_revenue',
          minWidth: 80,
        },
        {
          title: '支出金额',
          slot: 'costs',
          minWidth: 80,
        },
        {
          title: '供应商应入账金额',
          slot: 'ending_balance',
          minWidth: 80,
        },
      ],
      sellerColumns: [
        {
          title: "日期",
          slot: 'created_at',
          width: 150,
        },
        {
          title: "供应商",
          key: 'supplier_name',
          minWidth: 150,
        },
      ],
      shownroomFeeColumns: [
        {
          title: '日期',
          slot:'created_at',
          width: 150,
        },
        {
          title: "供应商",
          key: 'supplier_name',
          minWidth: 150,
        },
        {
          title: "入库单号",
          key: 'inbound_order_no',
          minWidth: 150,
        },
        {
          title: "状态",
          slot: 'status',
          minWidth: 150,
        },
      ],
      bili_id:0,
    };
  },
  computed: {
    ...mapState('admin/layout', ['isMobile']),
    labelWidth() {
      return this.isMobile ? undefined : 120;
    },
    labelPosition() {
      return this.isMobile ? 'top' : 'left';
    },
  },
  mounted() {
    this.ontab(1)
  },
  methods: {
    formattedDate(time) {
      const date = new Date(time);
      const year = date.getFullYear();
      // 注意：getMonth() 返回 0-11，所以要 +1
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    ontab(name){
      if (name == 1){
        this.columns = this.orderIncomeColumns
        this.tabList = this.merchantsDetails.system_supplier_bill
      }else if (name == 2) {
        this.columns = this.sellerColumns
        this.tabList = this.merchantsDetails.supplier_flowing_water_seller_list.new_seller

      }else if ( name == 3) {
        this.columns = this.sellerColumns
        this.tabList = this.merchantsDetails.supplier_flowing_water_seller_list.new_shipment_seller

      }else if ( name == 4) {
        this.columns = this.sellerColumns
        this.tabList = this.merchantsDetails.supplier_flowing_water_seller_list.new_arrival_seller

      }else if (name == 5) {
        this.columns = this.shownroomFeeColumns
        this.tabList = this.merchantsDetails.supplier_flowing_water_seller_list.total_shipment
      }else if (name == 6) {
        this.columns = this.shownroomFeeColumns
        this.tabList = this.merchantsDetails.supplier_flowing_water_seller_list.total_arrival
      }

    },
    // 关闭按钮
    cancel() {
      this.formValidate = {
        ids: '',
        supplier_id: '',
        keyword: '',
        data: '',
        page: 1,
        limit: 10,
      };
    },
  },
};
</script>

<style lang="less" scoped>
.divStyle{
  width: 70px;
}
.other-title{
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.colorred {
  color: #ff5722;
}
.colorgreen {
  color: #009688;
}
.search {
  width: 86px;
  height: 32px;
  background: #1890ff;
  border-radius: 4px;
  text-align: center;
  line-height: 32px;
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
}
.reset {
  width: 86px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid rgba(151, 151, 151, 0.36);
  text-align: center;
  line-height: 32px;
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}
.table {
  .ivu-table-default {
    overflow-y: auto;
    max-height: 350px;
  }
}
.dashboard-workplace {
  &-header {
    &-avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      margin-right: 16px;
      font-weight: 600;
    }

    &-tip {
      width: 82%;
      display: inline-block;
      vertical-align: middle;

      &-title {
        font-size: 13px;
        color: #000000;
        margin-bottom: 12px;
      }

      &-desc {
        &-sp {
          width: 33.33%;
          color: #17233d;
          font-size: 12px;
          display: inline-block;
        }
      }
    }

    &-extra {
      .ivu-col {
        p {
          text-align: right;
        }

        p:first-child {
          span:first-child {
            margin-right: 4px;
          }

          span:last-child {
            color: #808695;
          }
        }

        p:last-child {
          font-size: 22px;
        }
      }
    }
  }
}
.table {
  padding: 0px 30px 15px 30px;
}
.section{
  padding: 25px 0;
  //border-bottom:1px dashed #EEEEEE
}

.title{
  padding-left: 10px;
  border-left: 3px solid #1d2129;
  font-size: 15px;
  line-height: 15px;
  color: #303133;
}


.list {
  display: flex;
  align-items: center;
}


.item {
  flex: 0 0 calc(100% / 3);
  display: flex;
  margin-top: 16px;
  font-size: 13px;
}

.sales{
  display: flex; justify-content: center; align-items: center;text-align: center;padding: 10px 16px;
}

.sales-title {
  width: 60%;
  text-align: left;
}

.sales-debits{
  width: 20%;
}
.sales-credits{
  width: 20%;text-align: right;
}
.sales-bottom {
  position: absolute;bottom: 16px;width: 100%;
}

.price-table {
  width: 100%;
  max-width: 800px;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.price-table th,
.price-table td {
  padding: 8px 15px; /* 优化内间距，比原8px更舒适 */
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

.price-table th {
  background-color: #f7f9fc; /* 表头背景色区分 */
  font-weight: 600;
  color: #333;
  border-bottom: 2px solid #e5e9f2; /* 表头下边框加粗 */
}

.price-table tbody tr {
  transition: background-color 0.2s ease; /* 平滑过渡效果 */
}

.price-table tbody tr:hover {
  background-color: #fafbfc; /* 悬停行背景色变化 */
}

.price-table td:first-child {
  font-weight: 500; /* 第一列（类型）加粗突出 */
  color: #2c3e50;
}

.price-table td:not(:first-child) {
  color: #4a5568; /* 数值列颜色稍浅，突出类型列 */
}

/* 最后一行取消下边框，避免圆角被遮挡 */
.price-table tbody tr:last-child td {
  border-bottom: none;
}
</style>
